<template>
  <div class="detail flex">
    <div class="coverImages">
      <div class="big">
        <img
          :src="data.imgAltas[currentAlta].src | srcFormat"
          alt=""
        />
      </div>
      <div class="img-list flex">
        <div
          v-for="(item, index) in data.imgAltas"
          :key="item.src"
          class="img-item"
          :class="{ current: currentAlta == index }"
          @mouseenter="currentAlta = index"
        >
          <img :src="item.src | srcFormat" alt="" />
        </div>
      </div>
    </div>
    <div class="info">
      <!-- 商品信息 -->
      <div class="good-info">
        <div class="name">{{ data.seriesTitle }}</div>
        <div class="des">{{ data.seriesSubTitle }}</div>
        <div class="price">
          {{ data.coin }}
          <img src="../../assets/images/home/monad.png" alt="" />
        </div>
      </div>
      <!-- 分类 -->
      <div class="cate">
        <div class="cate-name">选择{{ data.parameterJson[0].title }}</div>
        <div class="flex">
          <div
            v-for="item in data.parameterJson[0].parameters"
            :key="item.id"
            class="cate-item"
            :class="{ active: item.id == $route.query.id }"
            @click="changeCate(item.id)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
      <!-- 商品的操作 -->
      <div class="opt">
        <div class="count">
          数量：<span>*礼品库存{{ data.stock }}件</span>
        </div>
        <!-- 步进器 -->
        <div class="step flex">
          <span @click="addTotal">+</span>
          <input type="text" v-model="buyCount" />
          <span @click="reduceTotal">-</span>
        </div>
        <div class="btns flex">
          <div class="btn add" @click="addToCart">加入购物车</div>
          <div class="btn duihuan">立即兑换</div>
        </div>
        <!-- 分享 -->
        <div></div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { toast } from '../../utils/toast';
import {addToCarApi} from '../../http/api'
export default {
  props: ["data"],
  data() {
    return {
      buyCount: 1,
      //   当前显示第几张图片
      currentAlta: 0,
    };
  },
  created(){
      if(this.$route.query.id){
        // 把商品的id存到localStorage里面
        localStorage.setItem('detailId',this.$route.query.id)
      }
  },
  methods: {
    changeCate(id) {
      //   console.log(id);
      //  不能直接给 route的query属性赋值
      this.$router.push(this.$route.path + "?id=" + id);
    },
    addTotal(){
        // 如果已经超过库存，就不能再增加
        if(this.buyCount >= this.data.stock) return toast('超出库存！！','warnning')
        this.buyCount++
    },
    reduceTotal(){
        if(this.buyCount <= 1) return toast('数量最少1件','warnning')
        this.buyCount--
    },
    addToCart(){
        // 判断 登录了没有
        // 如果没有登录
        if(!this.$store.state.userInfo.nickName) {
            this.$store.commit('modifyShowLogin',true)
            return toast('请先登录','warnning')
        }
        
        // 如果已经登录，向服务器发请求
        addToCarApi({
            // 商品id
            productId : this.$route.query.id,
            // 商品数量
            total:this.buyCount,
            // 如果immediate为1，表示立即购买
            // immediate,
            // 表示可以直接修改购物车中的商品数量
            // modified
        }).then(res=>{
            console.log(res);
            if(res.code === 0){
                toast('加入购物车成功','success')
                // 更新 tophead组件
                this.$store.commit('updateTopHeadKey')
            } 
        })
    }
  },
};
</script>
 
<style lang = "less" scoped>
.detail {
  width: 970px;
  font-family: SourceHanSansSC;
  img {
    width: 100%;
  }
  .coverImages {
    .big {
      width: 460px;
      margin-bottom: 20px;
    }
    .img-list {
      justify-content: space-between;
      .img-item {
        opacity: 0.5;
        width: 100px;
        height: 100px;
        cursor: pointer;
        &.current {
          opacity: 1;
        }
      }
    }
  }
  .info {
    margin-left: 30px;
    flex: 1;
    .good-info {
      border-bottom: 2px solid #ccc;
      .name {
        line-height: 42px;
        font-size: 28px;
        font-weight: 400;
        color: #000000;
      }
      .des {
        font-size: 14px;
        font-weight: 300;
        color: #999999;
        line-height: 28px;
      }
      .price {
        font-size: 28px;
        font-weight: bold;
        color: #fd604d;
        line-height: 72px;
        img {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
  .cate {
    padding-top: 5px;
    .cate-name {
      font-size: 16px;
      font-weight: 300;
      color: #000000;
      line-height: 34px;
    }
    .flex {
      flex-wrap: wrap;
      .cate-item {
        cursor: pointer;
        width: 76px;
        height: 32px;
        border: 1px solid #d1d1d1;
        text-align: center;
        line-height: 32px;
        margin: 0 20px 20px 0;
        &.active {
          border-color: #0a328e;
          color: #0a328e;
        }
      }
    }
  }
  .opt {
    .count {
      font-size: 16px;
      font-family: SourceHanSansSC;
      font-weight: 700;
      line-height: 60px;
      color: #000000;
      span {
        color: #666;
        font-weight: normal;
      }
    }
    .step {
      span {
        width: 30px;
        height: 32px;
        border: 1px solid #d1d1d1;
        text-align: center;
        line-height: 30px;        
        cursor: pointer;
        user-select: none;
      }
      input {
        width: 46px;
        height: 32px;
        padding: 0 5px;
        border: 1px solid #d1d1d1;
        border-left: 0 solid #000;
        border-right: 0 solid #000;
        text-align: center;
      }
    }
    .btns {
      padding-top: 20px;
      .btn {
        width: 150px;
        height: 46px;
        color: #fff;
        font-size: 18px;
        text-align: center;
        line-height: 46px;
        margin-right: 20px;
        cursor: pointer;
        user-select: none;
        &.add {
          background: #3dc36b;
        }
        &.duihuan {
          background-color: #fd604d;
        }
      }
    }
  }
}
</style>